/**
 * chart1 仪表盘配置
 */

// 基于准备好的dom，初始化echarts实例
var chart1 = echarts.init($('#guage')[0]);

// 指定图表的配置项和数据
var option1 = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [{
        name: '业务指标',
        type: 'gauge',
        // "center": ["50%", "50%"], // 表示 [x, y]
        radius: '100%', // 表示 [内半径, 外半径]，其中，内外半径可以是『绝对值』或者『百分比』
        detail: {
            formatter: '{value}%',
            textStyle: {
                fontSize: 20
            }
        },
        data: [{
            value: 50,
            name: '完成率'
        }]
    }]
};
// loading动画显示
chart1.showLoading();
setInterval(function() {
    option1.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    // loading动画隐藏
    chart1.hideLoading();
    // 使用刚指定的配置项和数据显示图表。
    chart1.setOption(option1, true);
}, 2000);
// chart1.setOption(option1);


/**
 * chart2 堆叠区域图配置
 */
var chart2 = echarts.init($('#Stacked-area-chart')[0]);
var option2 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    grid: {
        left: '3%',
        right: '5%',
        bottom: '3%',
        height: '90%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '视频广告',
        type: 'line',
        smooth: true, // 开启平滑处理 true 为0.5
        itemStyle: {
            normal: {
                areaStyle: {
                    type: 'default'
                }
            }
        },
        data: [10, 220, 500, 854, 500, 100, 0]
    }, {
        name: '直接访问',
        type: 'line',
        smooth: true, // 开启平滑处理 true 为0.5
        itemStyle: {
            normal: {
                areaStyle: {
                    type: 'default'
                }
            }
        },
        data: [0, 10, 50, 74, 290, 730, 620]
    }, {
        name: '搜索引擎',
        type: 'line',
        smooth: true, // 开启平滑处理 true 为0.5
        itemStyle: {
            normal: {
                areaStyle: {
                    type: 'default'
                }
            }
        },
        data: [1320, 1120, 600, 254, 190, 100, 0]
    }]
};
// 使用刚指定的配置项和数据显示图表。
chart2.setOption(option2);


/**
 * chart3 堆叠柱状图配置
 */

var chart3 = echarts.init($('#bar')[0]);

var option3 = {
    tooltip: {
        trigger: 'axis',
        textStyle: {
            fontSize: 14
        },
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },

    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        height: '90%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        name: '直接访问',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320]
    }, {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        data: [120, 132, 101, 134, 90, 230, 210]
    }, {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        data: [220, 182, 191, 234, 290, 330, 310]
    }, {
        name: '视频广告',
        type: 'bar',
        stack: '广告',
        data: [150, 232, 201, 154, 190, 330, 410]
    }, {
        name: '搜索引擎',
        type: 'bar',
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        markLine: {
            lineStyle: {
                type: 'dashed'
            },
            data: [
                [{
                    type: 'min'
                }, {
                    type: 'max'
                }]
            ]
        }
    }, {
        name: '百度',
        type: 'bar',
        barWidth: 5,
        stack: '搜索引擎',
        data: [620, 732, 701, 734, 1090, 1130, 1120]
    }, {
        name: '谷歌',
        type: 'bar',
        stack: '搜索引擎',
        data: [120, 132, 101, 134, 290, 230, 220]
    }, {
        name: '必应',
        type: 'bar',
        stack: '搜索引擎',
        data: [60, 72, 71, 74, 190, 130, 110]
    }, {
        name: '其他',
        type: 'bar',
        stack: '搜索引擎',
        data: [62, 82, 91, 84, 109, 110, 120]
    }]
};


// 使用刚指定的配置项和数据显示图表。
chart3.setOption(option3);

/**
 * 窗口改变图表宽度适应
 */
window.addEventListener("resize", function() {
    chart1.resize();
    chart2.resize();
    chart3.resize();
});

/**
 * layui数据表格配置
 */
var myDatas = {
    uid: '20201128',
    money: '666',
    date: '2020-11-28 18:18:18',
    completed: '2020-11-29',
    pid: 'Uimaker',
    opera: 'uid'
};
var myData = [];
for (var i = 0; i < 6; i++) {
    myData.push('<tr><td>' + myDatas.uid + '</td><td>' + myDatas.money + '</td><td>' + myDatas.date + '</td><td>' + myDatas.completed + '</td><td>' + myDatas.pid + '</td><td><a href="javascript:;">查看</a></td></tr>');
}
$('#info-table tbody').html(myData.join(''));
layui.use(['element', 'table'], function() {
    var element = layui.element,
        table = layui.table;


    //转换已有数据的静态表格
    (function() {
        table.init('demo', {
            height: 270, //设置高度
            even: false, //开启隔行背景
            skin: 'nob', //无边框风格
            limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //支持所有基础参数
        });
    })();
    // 窗口变化表格适应
    window.addEventListener("resize", function() {
        (function() {
            table.init('demo', {
                // height: 270, //设置高度
                // even: false, //开启隔行背景
                // skin: 'nob', //无边框风格
                // limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //     //支持所有基础参数
            });
        })();
    });
});

/**
 * 通知公告列表
 */
var myNotices = {
    title: 'Uimaker啦啦啦啦啦啦啦啦啦Uimaker啦啦啦啦啦啦啦啦啦',
    href: 'javascript:;',
    time: '2020-11-28'
};
var myNotice = [];
for (var i = 0; i < 8; i++) {
    myNotice.push('<li><span></span><a href="' + myNotices.href + '">' + myNotices.title + '</a><i>' + myNotices.time + '</i></li>');
}
$('.notice').html(myNotice.join(''));